<template>
  <div id="home">
    <div class="left EditCMBox">
      <el-menu
        router
        :default-active="active"
        text-color="#ffffff"
        background-color="#1E1E28"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        style="border:none;margin-bottom:40px"
      >
        <Menu :menuList="this.routes"></Menu>
      </el-menu>
      <div class="open" @click="OpenNavi">
        <i class="iconfont icon-zhankai" style="color:white;font-size:28px;"></i>
      </div>
    </div>
    <div class="right">
      <div class="RightBody">
        <div class="Timer" style="display:flex">
          <div class="hint_one">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size:18px;">
              <el-breadcrumb-item
                v-for="(item,index) in crumbs"
                :key="index"
                :to="{ path: item.path }"
              >{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div
            class="hint_two"
          >{{year}}-{{mouth}}-{{day}}&nbsp;&nbsp;{{hours}}:{{minutes}}:{{seconds}}</div>
          <div class="hint_three">
            <div style="margin:0 45px;">工单</div>
            <div style="margin:0 45px;">消息</div>
            <div style="margin:0 45px;">帮助</div>
            <el-dropdown>
              <div style="margin-left:35px;">
                <span class="el-dropdown-link">{{loginname}}</span>
                <i class="iconfont icon-yonghu" style="font-size:24px;"></i>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="changepass">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="BackLogin">退出账号</el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </div>
        </div>
        <!-- 修改密码弹出框 -->
        <el-dialog title="修改密码" center :visible.sync="dialogPass" width="30%">
          <el-form label-width="80px">
            <el-form-item label="当前密码:">
              <el-input v-model="nowpass" placeholder="输入当前密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码:">
              <el-input v-model="newpass" placeholder="输入新密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:">
              <el-input v-model="contentpass" placeholder="确认新密码" type="password"></el-input>
            </el-form-item>
            <el-form-item style="text-align:right">
              <el-button type="primary" @click="clickcontent">确定</el-button>
              <el-button @click="clickcancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from "../components/Menu";
function addNum (timer) {
  return timer >= 10 ? timer : "0" + timer;
}
import { mapGetters } from "vuex";
export default {
  name: "home",
  data () {
    return {
      year: "",
      mouth: "",
      day: "",
      hours: "",
      minutes: "",
      seconds: "",
      loginname: "",
      isCollapse: false,
      routes: [],
      active: this.$route.meta.title,
      dialogPass: false,
      nowpass: "",
      newpass: "",
      contentpass: ""
    };
  },
  components: {
    Menu
  },
  watch: {
    $route: {
      handler: function (val, params) {
        this.active = val.meta.title;
        console.log(val);
        let pageArr = val.matched.filter(item =>
          item.meta.hasOwnProperty("title")
        );
        this.$store.dispatch("setCrums", pageArr);
        this.crumbs = this.crums;
      }
    }
  },
  computed: {
    ...mapGetters(["crums"])
  },
  created () {
    this.routes = this.$router.options.routes[2].children;
    // 初始化面包屑
    console.log(this.crums);
    this.crumbs = this.crums;
  },
  mounted () {
    this.loginname = JSON.parse(sessionStorage.getItem("UserInfor")).UName;
    this.gettime();
    setInterval(() => {
      this.gettime();
    }, 1000);
  },
  methods: {
    gettime () {
      let date = new Date();
      let Gyears = date.getFullYear();
      let Gmouths = date.getMonth() + 1;
      let Gday = date.getDate();
      let Ghours = date.getHours();
      let Gminutes = date.getMinutes();
      let Gseconds = date.getSeconds();
      this.year = addNum(Gyears);
      this.mouth = addNum(Gmouths);
      this.day = addNum(Gday);
      this.hours = addNum(Ghours);
      this.minutes = addNum(Gminutes);
      this.seconds = addNum(Gseconds);
    },
    OpenNavi () {
      if (!this.isCollapse) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
    BackLogin () {
      this.$confirm("是否退出当前账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("UserInfor");
          this.$router.push({ path: "/" });
        })
        .catch(() => { });
    },
    changepass () {
      this.dialogPass = true;
    },
    clickcancel () {
      this.dialogPass = false;
      this.nowpass = "";
      this.newpass = "";
      this.contentpass = "";
    },
    clickcontent () {
      if (!this.nowpass) {
        this.$message({
          showClose: true,
          message: "请输入当前密码"
        });
      } else if (!this.newpass) {
        this.$message({
          showClose: true,
          message: "请输入新密码"
        });
      } else if (!this.contentpass) {
        this.$message({
          showClose: true,
          message: "请输入确认密码"
        });
      } else if (this.newpass != this.contentpass) {
        this.$message({
          showClose: true,
          message: "两次密码不一致"
        });
      } else {
        //补充接口
        this.dialogPass = false;
      }
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
#home {
  display: flex;
  width: 100%;
  min-width: 1400px;
  overflow: hidden;
  position: relative;
}
.left {
  max-width: 200px;
  /* width: 150px; */
  height: 100vh;
  min-height: 500px;
  background: #1e1e28;
  /* position: relative; */
  overflow: hidden;
  /* padding-bottom: 20px; */
  overflow-y: scroll;
}
.open {
  position: absolute;
  bottom: 10px;
  left: 14px;
}
.right {
  flex: 1;
  height: 100vh;
  min-width: 1250px;
  overflow-y: auto;
}
.Timer {
  height: 51px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.hint_one {
  display: flex;
  align-items: center;
}
.hint_two {
  line-height: 51px;
}
.hint_three {
  line-height: 51px;
  display: flex;
  justify-content: space-between;
}
.RightBody {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.EditCMBox::-webkit-scrollbar {
  width: 4px;
}
.EditCMBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.EditCMBox::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.el_form_item .el-form-item__content {
  margin-left: 0px !important;
}
</style>
